<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
    <!-- <link href="https://unpkg.com/tailwindcss@^3.3.2/dist/tailwind.min.css" rel="stylesheet"> -->

    <!-- <script src="https://cdn.jsdelivr.net/npm/class-toggler@1.0.0/dist/class-toggler.min.js"></script> -->


    <link rel="stylesheet" href="./output.css">
    <!-- <link rel="stylesheet" href="./output.css"> -->
    <!-- <script>
        // On page load or when changing themes, best to add inline in `head` to avoid FOUC
        localStorage.theme == 'dark'
        if (localStorage.theme === 'dark' || (
            !('theme' in localStorage) &&
            window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
            document.documentElement.classList.add('dark')
        } else {
            document.documentElement.classList.remove('dark')
        }

        // Whenever the user explicitly chooses light mode
        localStorage.theme = 'light'

        // Whenever the user explicitly chooses dark mode
        localStorage.theme = 'dark'

        // Whenever the user explicitly chooses to respect the OS preference
        localStorage.removeItem('theme')
    </script> -->
</head>

<body class="dark">
    <div class="bg-white dark:bg-slate-800 rounded-lg px-6 py-8 ring-1 ring-slate-900/5 shadow-xl w-[350px]">
        <div>
            <span class="inline-flex items-center justify-center p-2 bg-indigo-500 rounded-md shadow-lg">
                <svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z">
                    </path>
                </svg>
            </span>
        </div>
        <h3 class="text-slate-900 dark:text-white mt-5 text-base font-medium tracking-tight">Writes Upside-Down</h3>
        <p class="text-slate-500 dark:text-slate-400 mt-2 text-sm">
            The Zero Gravity Pen can be used to write in any orientation, including upside-down. It even works in outer
            space.
        </p>
    </div>
    <button id="dark-mode-toggle" class="p-2 bg-blue-500 text-white rounded">切换黑暗模式</button>
    <script>
        // (function () {
        const darkModeToggle = document.getElementById('dark-mode-toggle');
        const body = document.querySelector('body');

        darkModeToggle.addEventListener('click', function () {
            body.classList.toggle('dark');
        });
        // })();
    </script>
</body>

</html>